import Image from 'next/image';
import Link from 'next/link';
import { VideoService } from '@/lib/video/video-service';
import { formatPlayCount } from '@/lib/utils/utils';
import { RANK_METADATA } from '@/lib/utils/metadata';
import type { Metadata } from 'next';

// 使用统一的元数据
export const metadata: Metadata = RANK_METADATA;

export default async function RankPage() {
  // 获取热门视频
  const hotVideos = await VideoService.getHotVideos(50);
  
  return (
    <div className="container mx-auto px-3 sm:px-6 md:px-8 lg:px-12 xl:px-20 2xl:px-24 py-3 pb-4 sm:pb-4 max-w-full overflow-x-hidden">
      <div className="mb-8">
        <h1 className="text-2xl md:text-3xl font-bold">热门排行</h1>
        <p className="text-gray-400 mt-2">
          根据用户观看量综合排名，展示最受欢迎的影视作品
        </p>
      </div>
      
      {/* 排行榜 */}
      <div className="bg-gray-800 rounded-lg overflow-hidden">
        <div className="px-6 py-4 bg-gradient-to-r from-red-600 to-red-700">
          <h2 className="text-xl font-bold">本月热播榜</h2>
        </div>
        
        <div className="divide-y divide-gray-700">
          {hotVideos.map((video, index) => (
            <Link
              key={video.id}
              href={`/detail/${video.id}`}
              className="flex items-center gap-4 p-4 hover:bg-gray-700/50 transition"
            >
              {/* 排名 */}
              <div className={`flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full ${
                index < 3 ? 'bg-red-600' : 'bg-gray-600'
              } font-bold text-lg`}>
                {index + 1}
              </div>
              
              {/* 封面图 */}
              <div className="relative w-20 h-28 flex-shrink-0 overflow-hidden rounded-md">
                <Image
                  src={video.vodPic || '/images/placeholder.jpg'}
                  alt={video.vodName || '影视作品'}
                  fill
                  sizes="80px"
                  className="object-cover"
                />
              </div>
              
              {/* 信息 */}
              <div className="flex-grow min-w-0">
                <h3 className="font-medium text-lg truncate">{video.vodName}</h3>
                <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-gray-400 mt-1">
                  <div>{video.typeName}</div>
                  <div>{video.vodArea}</div>
                  <div>{video.vodYear}</div>
                </div>
                <div className="flex items-center mt-2 text-sm">
                  <div className="flex items-center text-yellow-500">
                    <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <span>{video.vodScore?.toFixed(1) || '暂无评分'}</span>
                  </div>
                  <div className="ml-4 flex items-center text-gray-400">
                    <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                    <span>{formatPlayCount(video.vodHits)}次播放</span>
                  </div>
                </div>
              </div>
              
              {/* 评分 */}
              {video.vodScore && (
                <div className="hidden md:flex flex-col items-center justify-center gap-1 flex-shrink-0">
                  <div className="text-2xl font-bold text-red-500">{video.vodScore.toFixed(1)}</div>
                  <div className="text-xs text-gray-400">评分</div>
                </div>
              )}
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
} 